<template>
  <div class="q-px-lg q-pb-md">
    <q-timeline color="secondary">
      <div v-for="day in eventDays" :key="day.date">
        <q-timeline-entry heading tag="h5">{{ $filters.dateFormat(new Date(day.date)) }}</q-timeline-entry>
        <q-timeline-entry
            v-for="event in day.events" :key="event.id"
            :title="event.title"
            :subtitle="event.createdAt"
            :icon="{
              1: 'alarm',
              2: 'delete',
            }[event.type || 1]"
            :color="{
              1: 'primary',
              2: 'orange'
            }[event.type || 1]"
        >
          <!--待办提醒-->
          <template v-if="event.type === 1">
            <div>{{ event.content }}</div>
          </template>
          <!--应用操作-->
          <template v-if="event.type === 2">
            <div>
              <span>应用</span>
              <q-chip dense>
                <q-avatar color="primary" text-color="white">
                  <img :src="event.data.icon" alt="">
                </q-avatar>
                {{ event.data.name }}
              </q-chip>
              <span>已经被 <strong>{{ event.data.operation }}</strong></span>
            </div>
          </template>
        </q-timeline-entry>
      </div>
    </q-timeline>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
import dayjs from 'dayjs'

const { mapState } = createNamespacedHelpers('workbench')

export default {
  name: 'TheTimelinePanel',
  data () {
    return {}
  },
  mounted () {
    this.$store.dispatch('workbench/storeLoad')
  },
  computed: {
    ...mapState({
      apps: state => state.apps
    }),
    events () {
      return this.$store.state.workbench.events
    },
    eventDays () {
      const days = []
      this.events.forEach(event => {
        const eventDate = dayjs(event.createdAt).format('YYYY-MM-DD')
        const matchDay = days.find(day => day.date === eventDate)
        if (matchDay) {
          matchDay.events.push(event)
        } else {
          days.push({
            date: eventDate,
            events: [event]
          })
        }
      })
      return days
    }
  }
}

</script>

<style scoped>

</style>
